<script>
import outMain from "@/components/outMain.vue";
import bigImg from "@/components/public/bigImg.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { cyxzDetails } from "@/http/api";

export default {
  components: { outMain, bigImg },
  name: "",
  data() {
    return {
      formData: {},
      imgArr: [],
      detailId: this.$route.query.id,
    };
  },
  props: {},
  setup() {},
  methods: {
    linkFn(url, id, navId) {
      if (id != 0) {
        this.$router.push({ path: url, query: { id: id, navId: navId } });
      }
    },
    backFn() {
      this.$router.back();
    },
    getData() {
      cyxzDetails({ shipowner_manage_money_id: this.detailId }).then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
          if (res.data.data.jsxz_img) {
            this.imgArr = res.data.data.jsxz_img.split(",");
          }
        }
      });
    },
  },
  mounted() {},
  created() {
    this.getData();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="formHead">
          <div>船员薪酬详情</div>
          <btn value="返回上一级" @ok="backFn"></btn>
        </div>
        <div class="formMain">
          <div class="stepCont">
            <div class="formDes">
              <div class="desTitle">船员信息</div>
              <div class="desCont">
                <div class="desItem">
                  <div class="desName">结算单号</div>
                  <div class="desText">{{ formData.js_order_number }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">船员姓名</div>
                  <div class="desText">
                    <span
                      class="linkText_"
                      @click="linkFn('bootSignDetail', formData.cy_sign_id)"
                    >
                      {{ formData.qy_real_name }}
                    </span>
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">船员电话</div>
                  <div class="desText">{{ formData.qy_mobile }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">结算月份</div>
                  <div class="desText">{{ formData.qy_mobile }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">任职岗位</div>
                  <div class="desText">{{ formData.qy_position_name }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">薪资金额</div>
                  <div class="desText">
                    {{ formData.xz_money_dw == 1 ? "¥" : "$"
                    }}{{ formData.xz_money }}
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">社保金额</div>
                  <div class="desText">
                    {{ formData.sb_money_dw == 1 ? "¥" : "$"
                    }}{{ formData.sb_money }}
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">结算状态</div>
                  <div class="desText">
                    <el-tag type="info" v-if="formData.js_status == 1"
                      >待结算</el-tag
                    >
                    <el-tag v-if="formData.js_status == 2">待审核</el-tag>
                    <el-tag type="success" v-if="formData.js_status == 3"
                      >已通过</el-tag
                    >
                    <el-tag type="danger" v-if="formData.js_status == 4"
                      >已驳回</el-tag
                    >
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">结算时间</div>
                  <div class="desText">{{ formData.jsxz_time }}</div>
                </div>
                <div class="desItem" v-if="formData.jsxz_staff_name">
                  <div class="desName">操作员工</div>
                  <div class="desText">
                    <span
                      :class="formData.qy_staff_id == 0 ? '' : 'linkText_'"
                      @click="linkFn('staffListDetail', formData.qy_staff_id)"
                    >
                      {{ formData.jsxz_staff_name }}
                    </span>
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">船东名称</div>
                  <div class="desText">
                    <span
                      :class="formData.qy_enterprise_id == 0 ? '' : 'linkText_'"
                      @click="
                        linkFn(
                          'cooperationBooterDetail',
                          formData.qy_enterprise_id
                        )
                      "
                    >
                      {{ formData.qy_enterprise_name }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="formDes" v-if="imgArr.length > 0">
              <div class="desTitle">结算凭证</div>
              <div class="desCont">
                <div class="desItem">
                  <bigImg :propImg="imgArr" :src="imgArr[0]"></bigImg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
